<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/21
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basepath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    System.out.println("basepath:"+basepath);
%>
<%--<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
<%--<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>--%>
<%--<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>--%>
<%--<%@taglib  uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>--%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basepath %>" />
    <meta charset="UTF-8">
    <title>小朋银行</title>
</head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/apply.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    $(function(){
        $('#target').distpicker();
    });
</script>
<body>

<!--头部连接-->
<div class="header">
    <div class="wraper">
        <!--顶部链接-->
        <div class="topLink">
            <ul>
                <li>
                    <a href="#"><span>xx银行  |</span></a>
                </li>
                <li>
                    <a href="#"><span>加入收藏  |</span></a>
                </li>
                <li>
                    <a href="#"><span>联系我们  |</span></a>
                </li>
                <li class="last">
                    <a href="#"><span>网点查询</span></a>
                </li>
            </ul>
        </div>
        <div class="ll">
            <ul>
                <li>
                    <a href="#">登录</a>
                </li>
                <li>
                    <a href="#">注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部-->
<div class="topSection">
    <div class="wraper">
        <div class="h90">
            <!--logo与城市切换-->
            <div class="l">
                <div class="logo">
                    <a href="#"> <img src="image/log.png" alt="小朋银行" style="width: 90px;height: 90px;">
                    </a>
                </div>
            </div>
            <div class="r">
                <div class="kefuline">
                    <p class="kefu">客服热线：0000-000-000 &nbsp; 0000-000-000</p>
                </div>
            </div>

        </div>

        <div class="nav" id="navigation">
            <ul>
                <li class="focus"><a href="#" class="title" title="首页">首页</a>
                </li>
                <li><a href="#" class="title" title="办卡申请">办卡申请</a>
                </li>
                <li><a href="#" class="title" title="">服务2</a>
                </li>
                <li><a href="#" class="title" title="">服务3</a>
                </li>
                <li><a href="#" class="title" title="">服务4</a>
                </li>
                <li><a href="#">服务5</a>
                </li>
                <li><a href="#" title="">服务6</a>
                </li>
                <li><a href="#" title="">服务7</a>
                </li>
                <li class=""><a href="#" title="帮助中心">帮助中心</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--主体页面-->
<div class="main">

    <div class="borderWrap">
        <p class="title">您正在申请中国小朋银行信用卡，为确保您申请成功，请务必如实填写如下信息。 </p>
        <div class="form">
            <form id="cardReq" action="credit-message-particular/addparticular" method="post">
                <input type="hidden" value="${name}" name="name" id="name"/>
                <table>


                    <tr>
                        <td class="t1">
                            <span class="f1">性别：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="男" name="sex" />男
                            <input type="radio" value="女" name="sex" />女
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">年龄：</span>
                        </td>
                        <td class="td2">
                            <div class="option">
                                <select id="age" name="age">
                                    <option value="0">请选择</option>
                                    <option value="0">18</option>
                                    <option value="0">19</option>
                                    <option value="0">20</option>
                                    <option value="0">21</option>
                                    <option value="0">22</option>
                                    <option value="0">23</option>
                                    <option value="0">24</option>
                                    <option value="0">25</option>
                                    <option value="0">26</option>
                                    <option value="0">27</option>
                                    <option value="0">28</option>
                                    <option value="0">29</option>
                                    <option value="0">30</option>
                                    <option value="0">31</option>
                                    <option value="0">32</option>
                                    <option value="0">33</option>
                                    <option value="0">34</option>
                                    <option value="0">35</option>
                                </select>
                            </div>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>
                    <!-- datalist                   -->
                    <!--                    <tr>-->
                    <!--                        <td class="t1">-->
                    <!--                            <span class="f1">年龄：</span>-->
                    <!--                        </td>-->
                    <!--                        <td class="td2">-->
                    <!--                            <input id="" list="ages">-->
                    <!--                            <datalist id="ages">-->
                    <!--                                    <option value="0">18</option>-->
                    <!--                                    <option value="0">19</option>-->
                    <!--                                    <option value="0">20</option>-->
                    <!--                                    <option value="0">21</option>-->
                    <!--                                    <option value="0">22</option>-->
                    <!--                                    <option value="0">23</option>-->
                    <!--                                    <option value="0">24</option>-->
                    <!--                                    <option value="0">25</option>-->
                    <!--                                    <option value="0">26</option>-->
                    <!--                                    <option value="0">27</option>-->
                    <!--                                    <option value="0">28</option>-->
                    <!--                                    <option value="0">29</option>-->
                    <!--                                    <option value="0">30</option>-->
                    <!--                                    <option value="0">31</option>-->
                    <!--                                    <option value="0">32</option>-->
                    <!--                                    <option value="0">33</option>-->
                    <!--                                    <option value="0">34</option>-->
                    <!--                                    <option value="0">-->
                    <!--                            </datalist>-->

                    <!--                        </td>-->
                    <!--                        <td class="t3">-->

                    <!--                        </td>-->
                    <!--                    </tr>-->

                    <tr>
                        <td class="t1">
                            <span class="f1">单位名称：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="companyName" id="companyName"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr id="address">
                        <td class="t1">
                            <span class="f1">单位地址：</span>
                        </td>
                        <td class="td2">
                            <!--                            <input type="text" value="" name="companyAddress" id="companyAddress"/>-->
                            <input type="hidden" v-model="address" name="companyAddress" id="companyAddress">
                            地址为：{{address}}
                            <div id="target"><!-- container -->
                                <select data-province="---- 选择省 ----" v-model="address1"></select>
                                <select data-city="---- 选择市 ----" v-show="address1!=''"  v-model="address2"></select>
                                <select data-district="---- 选择区 ----" v-show="address2!=''"  v-model="address3"></select>
                            </div>

                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <script type="text/javascript">
                        let vm = new Vue({
                            el: '#address',
                            data: {
                                //默认值
                                address1:"北京市",
                                address2:"北京市市辖区",
                                address3:"东城区",
                                address:"北京市北京市市辖区东城区",
                            },
                            watch:{
                                'address1':function(){
                                    this.address3="";
                                    this.address2="";
                                    this.address=this.address1+this.address2+this.address3

                                },
                                'address2':function(){
                                    this.address3="";
                                    this.address=this.address1+this.address2+this.address3
                                },
                                'address3':function(){

                                    this.address=this.address1+this.address2+this.address3
                                }
                            }
                        });
                    </script>
                    <tr>
                        <td class="t1">
                            <span class="f1">单位详细地址：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="companyDetailAddress" id="companyDetailAddress"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">单位性质：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="companyNature" id="companyNature"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">职务：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="duty" id="duty"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">工作年限：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="workingAge" id="workingAge"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">年收入：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="annualIncome" id="annualIncome"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">是否有车：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="是" name="car" />是
                            <input type="radio" value="否" name="car" />否
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">住房性质：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="houseNature" id="houseNature"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">住房地址：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="houseAddress" id="houseAddress"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">是否有社保：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="是" name="socialSecurity" />是
                            <input type="radio" value="否" name="socialSecurity" />否
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">是否有公积金：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="是" name="accumulationFund" />是
                            <input type="radio" value="否" name="accumulationFund" />否
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">户籍：</span>
                        </td>
                        <td class="td2">
                            <input type="text" value="" name="censusRegister" id="censusRegister"/>
                        </td>
                        <td class="t3">

                        </td>
                    </tr>

                    <tr>
                        <td class="t1">
                            <span class="f1">婚姻状况：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="已婚" name="maritalStatus" />已婚
                            <input type="radio" value="未婚" name="maritalStatus" />未婚
                        </td>
                        <td class="t3">

                        </td>
                    </tr>
                    <!--                    受教育程度-->
                    <tr>
                        <td class="t1">
                            <span class="f1">婚姻状况：</span>
                        </td>
                        <td class="td2">
                            <input type="radio" value="小学" name="educationalLever" />小学
                            <input type="radio" value="初中" name="educationalLever" />初中
                        </td>
                        <td class="t3">

                        </td>
                    </tr>
                </table>
                <div id="b1">
                    <input type="reset" value="取消重填">
                    <input type="submit" value="下一步">
                </div>
            </form>
        </div>
    </div>

</div>
<!--尾部部分-->
</body>
</html>
